
import react, { FC, useEffect, useState, useContext } from 'react'
import { IRouteComponentProps } from "umi"
import { Form, Input, Button, Radio, Modal, message, Space } from 'antd';
import { MailOutlined, UserOutlined, PhoneOutlined } from '@ant-design/icons';
import storeContext from "@/context/storeContext";
import { observer } from "mobx-react-lite";
import styles from './teacherPersonCenter.less';
const teacherPersonCenter: FC<IRouteComponentProps> = props => {
    const { useref } = useContext(storeContext)
    // tab切換
    let [value, setValue] = useState("0");
    // 設置tab切換
    const [isModalVisible, setIsModalVisible] = useState(false);
    //判斷渲染
    let [flag, setFlag] = useState(false);
    // 修改成功
    const success = () => {
        message.success('修改成功');
      };
    //   修改失敗
      const error = () => {
        message.error('修改失敗');
      };
    // 默認用戶信息
    useEffect(() => {
        useref.getProfile() 
    }, [])
    //點擊修改
    const onFinish = (values: any) => {
        const {nickName,phone,email,sex} = values;
        let data = { ...useref.uulist, nickName, email, phonenumber: phone, sex }
          useref.publice(data) ;
          if(useref.istan){
            success()
          } else{
            error()
          }

    };
    // 提交錯誤的話
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const showModal = () => {
        setIsModalVisible(true);
    };
    // 確定
    const handleOk = () => {
        setIsModalVisible(false);
    };
    // 取消
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return <div className={styles.centre}>
        <div className={styles.leftt}>
            <div className={styles.users}>个人信息</div>
            <div className={styles.leff}>
                <div className={styles.leff11}>
                    <img onClick={showModal} src={`http://111.203.59.61:8060${useref.imgSrc}`} alt="" />
                    </div>
                <ul className={styles.lists}>
                    <li><div>< MailOutlined style={{ fontWeight: 'bold' }} /><span> 用户名称</span></div><span>{useref.uulist.nickName}</span> </li>
                    <li><div>< UserOutlined style={{ fontWeight: 'bold' }} /><span> 手机号码</span></div><span>{useref.uulist.phonenumber}</span></li>
                    <li><div>< PhoneOutlined style={{ fontWeight: 'bold' }} /><span>用户邮箱</span></div><span>{useref.uulist.email}</span></li>
                </ul>
            </div>
        </div>
        <div className={styles.rightt}>
            <div className={styles.users1}>基本资料</div>
            <div className={styles.tabcont}>
                <div className={styles.tabcont1}>
                    <div className={styles.tabcont2}>
                        <div className={styles.tabcont3}>
                            <span onClick={() => { setFlag(false) }} className={flag ? "" : styles.active}>基本资料</span>
                            <span onClick={() => { setFlag(true) }} className={flag ? styles.active : ""}>修改密码</span>
                        </div>
                    </div>
                    <div className={flag ? styles.flag : ""}>
                        <Form
                            name="basic"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                        >
                            <Form.Item
                                label="用户昵称"
                                name="nickName"
                                rules={[{ required: true, message: '请输入修改后的用户昵称' }]}
                            >
                                <Input placeholder={useref.uulist.nickName} />
                            </Form.Item>

                            <Form.Item
                                label="手机号码"
                                name="phone"
                                rules={[{ required: true, message: '请输入手机号码' }]}
                            >
                                <Input placeholder={useref.uulist.phonenumber} />
                            </Form.Item>

                            <Form.Item
                                label="邮箱"
                                name="email"
                                rules={[{ required: true, message: '请输入邮箱' }]}
                            >
                                <Input placeholder={useref.uulist.email} />
                            </Form.Item>
                            <Form.Item name="sex" rules={[{ required: true, message: '请选择性别' }]}>
                                <Radio.Group value='0'>
                                    <Radio value="0" style={{ border: "none" }}>男</Radio>
                                    <Radio value="1">女</Radio>
                                </Radio.Group>
                            </Form.Item>

                            <div className={styles.btn} >
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        保存
                                    </Button>
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" danger onClick={() => { console.log(props.history.push('/teachers/userInfo/needHandle')) }}>
                                        关闭
                                    </Button>
                                </Form.Item>
                            </div>
                        </Form>
                    </div>

                    <div className={flag ? "" : styles.flag}>
                        <Form
                            name="basic"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                        >
                            <Form.Item
                                label="旧密码"
                                name="nickName"
                                rules={[{ required: true, message: '请输入就密码' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="新密码"
                                name="phone"
                                rules={[{ required: true, message: '请输入新密码' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="确认密码"
                                name="email"
                                rules={[{ required: true, message: '请确认密码' }]}
                            >
                                <Input />
                            </Form.Item>

                            <div className={styles.btn1}>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit" >
                                        保存
                                    </Button>
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" danger onClick={() => { console.log(props.history.push('/teachers/userInfo/needHandle')) }}>
                                        关闭
                                    </Button>
                                </Form.Item>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
            <Modal  visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <div>
                      <img  style={{with:"100px",height:"100px",borderRadius:"50%"}} src={`http://111.203.59.61:8060${useref.imgSrc}`} alt="" />
                      <input type="file" placeholder="請上傳頭像"  style={{with:'100px'}} onChange={(e)=>{
                                  let from=new FormData();
                                  console.log(from);
                                  let files=e.target.files;
                                  if(files){
                                    for(let i=0;i<files.length;i++){
                                        from.append("file",files[i]);
                                    }
                                      useref.upTou(from)
                                  }   
                      }}/>
                </div>
            </Modal>
        </div>
    </div >
}
export default observer(teacherPersonCenter)
